<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>会员分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="pull-right">
                            <button id="user_time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                                <span id="user_date"></span>
                                <span class="caret"></span>
                            </button>
                        </span>
                        <h5>各访客在对应时间端的变化情况</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="depth_users">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>各访客访问深度分布情况</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="visit_depth_users">-</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-9">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="pull-right">
                            <button id="visit_time_show_bt" type="button" class="btn btn-default no-margins no-borders" style="padding-bottom: 0px">
                                <span id="visit_date"></span>
                                <span class="caret"></span>
                            </button>
                        </span>
                        <h5>各访客在对应时间端的变化情况</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="depth_visits">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>各会话访问深度分布情况</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="no-margins" id="visit_depth_visits">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">
        var depthKeys = ["pv_1", "pv_2", "pv_3", "pv_4", "pv_5_10", "pv_11_30", "pv_31_60", "pv_61_plus"];

        function loadHead(sd, ed) {
            var activeUserUrl = COMMON_PREFIX_URL + "/stats/summary/depth?metric=view_depth_of_user&platform=website";
            activeUserUrl += "&start_date=" + sd + "&end_date=" + ed;
            $.get(activeUserUrl, {}, function(data){
                if (data.code == '200' && data.data.length > 0) {
                    var dd = data.data[0];

                    var activeUserSeries = {
                        name: "活跃访客访问深度信息",
                        data: []
                    };
                    $.each(depthKeys, function(i, key) {
                        var v = dd["$" + key];
                        addObject(activeUserSeries["data"], [key, v], v && v != 0);
                    });
                    showPie("visit_depth_users", activeUserSeries);
                } else {
                    $("#visit_depth_users").html("-");
                }
            }, "json");

            var visitUrl = COMMON_PREFIX_URL + "/stats/summary/depth?metric=view_depth_of_session&platform=website";
            visitUrl += "&start_date=" + sd + "&end_date=" + ed;
            $.get(visitUrl, {}, function(data){
                if (data.code == '200' && data.data.length > 0) {
                    var dd = data.data[0];

                    var series = {
                        name: "活跃访客访问深度信息",
                        data: []
                    };
                    $.each(depthKeys, function(i, key) {
                        var v = dd["$" + key];
                        addObject(series["data"], [key, v], v && v != 0);
                    });
                    showPie("visit_depth_visits", series);
                } else {
                    $("#visit_depth_visits").html("-");
                }
            }, "json");
        };

        function loadActiveUserContent(sd, ed) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/depth?metric=view_depth_of_user&platform=website&group_by=day";
            url += "&start_date=" + sd + "&end_date=" + ed;
            $.get(url, {}, function(data){
                if (data.code == '200') {
                    if (data.data.length == 0) {
                        showNoConnent("depth_users");
                        return ;
                    }
                    var categories = [];
                    var pv1Series = {name:"pv_1活跃访客量", data:[]};
                    var pv2Series = {name:"pv_2活跃访客量", data:[]};
                    var pv3Series = {name:"pv_3活跃访客量", data:[]};
                    var pv4Series = {name:"pv_4活跃访客量", data:[]};
                    var pv5Series = {name:"pv_5_10活跃访客量", data:[]};
                    var pv6Series = {name:"pv_11_30活跃访客量", data:[]};
                    var pv7Series = {name:"pv_31_60活跃访客量", data:[]};
                    var pv8Series = {name:"pv60+活跃访客量", data:[]};
                    var chart;

                    if (data.data.length == 1) {
                        $.each(data.data, function(i, item) {
                            categories.push(item["day"]);
                            var v = item["$pv_1"];
                            addObject(pv1Series["data"], v, v && v != 0);
                            v = item["$pv_2"];
                            addObject(pv2Series["data"], v, v && v != 0);
                            v = item["$pv_3"];
                            addObject(pv3Series["data"], v, v && v != 0);
                            v = item["$pv_4"];
                            addObject(pv4Series["data"], v, v && v != 0);
                            v = item["$pv_5_10"];
                            addObject(pv5Series["data"], v, v && v != 0);
                            v = item["$pv_11_30"];
                            addObject(pv6Series["data"], v, v && v != 0);
                            v = item["$pv_31_60"];
                            addObject(pv7Series["data"], v, v && v != 0);
                            v = item["$pv_61_plus"];
                            addObject(pv8Series["data"], v, v && v != 0);
                        });
                        chart = new Highcharts.Chart({
                            chart : {
                                renderTo : 'depth_users', // 在那个标签上显示，指定id即可
                                type: 'column'
                            },
                            xAxis : {
                                title : {
                                    text : "日期"
                                }
                            },
                            yAxis : [{
                                min: 0,
                                title : {
                                    text : "访客数量"
                                }
                            }],
                            series : []
                        });
                    } else {
	                    $.each(data.data, function(i, item) {
	                        categories.push(item["day"]);
	                        pv1Series["data"].push(notNull(item["$pv_1"]));
	                        pv2Series["data"].push(notNull(item["$pv_2"]));
	                        pv3Series["data"].push(notNull(item["$pv_3"]));
	                        pv4Series["data"].push(notNull(item["$pv_4"]));
	                        pv5Series["data"].push(notNull(item["$pv_5_10"]));
	                        pv6Series["data"].push(notNull(item["$pv_11_30"]));
	                        pv7Series["data"].push(notNull(item["$pv_31_60"]));
	                        pv8Series["data"].push(notNull(item["$pv_61_plus"]));
	                    });
                        chart = new Highcharts.Chart({
                            chart : {
                                renderTo : 'depth_users', // 在那个标签上显示，指定id即可
                            },
                            xAxis : {
                                title : {
                                    text : "日期"
                                }
                            },
                            yAxis : [{
                                min: 0,
                                title : {
                                    text : "访客数量"
                                }
                            }],
                            series : []
                        });
                    }
                    chart.addSeries(pv1Series);
                    chart.addSeries(pv2Series);
                    chart.addSeries(pv3Series);
                    chart.addSeries(pv4Series);
                    chart.addSeries(pv5Series);
                    chart.addSeries(pv6Series);
                    chart.addSeries(pv7Series);
                    chart.addSeries(pv8Series);
                    chart.xAxis[0].setCategories(categories);
                } else {
                    showNoConnent("depth_users", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
            }, "json");
        };

        function loadVisitContent(sd, ed) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/depth?metric=view_depth_of_session&platform=website&group_by=day";
            url += "&start_date=" + sd + "&end_date=" + ed;
            $.get(url, {}, function(data){
                if (data.code == '200') {
                    if (data.data.length == 0) {
                        showNoConnent("depth_visits");
                        return ;
                    }
                    var categories = [];
                    var pv1Series = {name:"pv_1会话数", data:[]};
                    var pv2Series = {name:"pv_2会话数", data:[]};
                    var pv3Series = {name:"pv_3会话数", data:[]};
                    var pv4Series = {name:"pv_4会话数", data:[]};
                    var pv5Series = {name:"pv_5_10会话数", data:[]};
                    var pv6Series = {name:"pv_11_30会话数", data:[]};
                    var pv7Series = {name:"pv_31_60会话数", data:[]};
                    var pv8Series = {name:"pv60+会话数", data:[]};
                    var chart;

                    if (data.data.length == 1) {
                        $.each(data.data, function(i, item) {
                            categories.push(item["day"]);
                            var v = item["$pv_1"];
                            addObject(pv1Series["data"], v, v && v != 0);
                            v = item["$pv_2"];
                            addObject(pv2Series["data"], v, v && v != 0);
                            v = item["$pv_3"];
                            addObject(pv3Series["data"], v, v && v != 0);
                            v = item["$pv_4"];
                            addObject(pv4Series["data"], v, v && v != 0);
                            v = item["$pv_5_10"];
                            addObject(pv5Series["data"], v, v && v != 0);
                            v = item["$pv_11_30"];
                            addObject(pv6Series["data"], v, v && v != 0);
                            v = item["$pv_31_60"];
                            addObject(pv7Series["data"], v, v && v != 0);
                            v = item["$pv_61_plus"];
                            addObject(pv8Series["data"], v, v && v != 0);
                        });
                        chart = new Highcharts.Chart({
                            chart : {
                                renderTo : 'depth_visits', // 在那个标签上显示，指定id即可
                                type: 'column'
                            },
                            xAxis : {
                                title : {
                                    text : "日期"
                                }
                            },
                            yAxis : [{
                                min: 0,
                                title : {
                                    text : "会话个数"
                                }
                            }],
                            series : []
                        });
                    } else {
                        $.each(data.data, function(i, item) {
                            categories.push(item["day"]);
                            pv1Series["data"].push(notNull(item["$pv_1"]));
                            pv2Series["data"].push(notNull(item["$pv_2"]));
                            pv3Series["data"].push(notNull(item["$pv_3"]));
                            pv4Series["data"].push(notNull(item["$pv_4"]));
                            pv5Series["data"].push(notNull(item["$pv_5_10"]));
                            pv6Series["data"].push(notNull(item["$pv_11_30"]));
                            pv7Series["data"].push(notNull(item["$pv_31_60"]));
                            pv8Series["data"].push(notNull(item["$pv_61_plus"]));
                        });
                        chart = new Highcharts.Chart({
                            chart : {
                                renderTo : 'depth_visits', // 在那个标签上显示，指定id即可
                            },
                            xAxis : {
                                title : {
                                    text : "日期"
                                }
                            },
                            yAxis : [{
                                min: 0,
                                title : {
                                    text : "会话个数"
                                }
                            }],
                            series : []
                        });
                    }
                    chart.addSeries(pv1Series);
                    chart.addSeries(pv2Series);
                    chart.addSeries(pv3Series);
                    chart.addSeries(pv4Series);
                    chart.addSeries(pv5Series);
                    chart.addSeries(pv6Series);
                    chart.addSeries(pv7Series);
                    chart.addSeries(pv8Series);
                    chart.xAxis[0].setCategories(categories);
                } else {
                    showNoConnent("depth_visits", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
            }, "json");
        };

        $(document).ready(function(){
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadHead(sd, ed);

            var startDate = getStartDate();
            var endDate = getEndDate();
            // 加载数据
            loadActiveUserContent(startDate, endDate);
            loadVisitContent(startDate, endDate);

            // 开始加载时间控件
            new AE_Date('user_date','user_time_show_bt',function(startDate, endDate){
                loadActiveUserContent(startDate, endDate);
            }, startDate, endDate);
            new AE_Date('visit_date','visit_time_show_bt',function(startDate, endDate){
                loadVisitContent(startDate, endDate);
            }, startDate, endDate);
        });

        function notNull(value) {
            if (value) {
                return value;
            } else {
                return 0;
            }
        }

        function addObject(arr, obj, flag) {
            if (flag) {
                arr.push(obj);
            }
        }

        function showPie(id, series) {
            if (series && series["data"] && series["data"].length > 0) {
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: id,
                        type: 'pie'
                    },
                    tooltip: {
                        pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>({point.y})',
                        shared: false
                    },
                    series: []
                });
                chart.addSeries(series);
            }
        }
    </script>
</body>
</html>